<template>
  <div class="ProductionSchedule">
    <div class="chat-title">生产进度</div>
    <div class="chat-subtitle">production progress</div>
    <div class="test_box" id="gaugemain"></div>

    <div v-for="(item ,idx) in list" :key="idx">
      <ElectricQuantity1 class="el-item" :obj="item">
      </ElectricQuantity1>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';
  import ElectricQuantity1 from './ElectricQuantity1'

  export default {
    props: ["orderInfo"],
    components: {
      ElectricQuantity1,
    },
    data() {
      return {
        list: [{
          name: "生产量",
          sub: "Production"
        }, {
          name: "合格率",
          sub: "Pass rate"
        }, {
          name: "生产效率",
          sub: "Productivity"
        }],
        myChart: "",
      };
    },
    watch: {
      orderInfo(newValue, oldValue) {
        // var option1 = this.myChart.getOption();
        this.myChart.clear();
        // this.myChart.setOption(option1);
        this.initData()
        this.drawBar();
      }
    },
    created() {
      this.initData()
    },
    mounted() {
      this.drawBar();
    },
    methods: {
      initData() {
        // 生产量
        this.list[0].t1 = this.orderInfo.COMPLETE_QTY
        this.list[0].max = this.orderInfo.QTY

        // 合格率
        this.list[1].t1 = this.orderInfo.QUALITY_RATE
        this.list[1].max = 100

        // 生产效率
        this.list[2].t1 = this.orderInfo.PRODUCE_EFFICIENCY
        this.list[2].max = 100
      },
      drawBar: function () {
        var self = this;
        console.log("---", this.orderInfo)
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById("gaugemain"));
        let option = {
          series: [{
              type: 'gauge',
              center: ['50%', '60%'],
              startAngle: 210,
              endAngle: -30,
              min: 0,
              max: 100, // 最大值
              splitNumber: 10,
              itemStyle: {
                // color: '',
                normal: { //颜色渐变
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                        offset: 0,
                        color: '#5865F4'
                      },
                      {
                        offset: 0.5,
                        color: '#526AF5'
                      },
                      {
                        offset: 1,
                        color: '#18B2FC'
                      }
                    ]
                  )
                }
              },
              pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '8%',
                width: 10,
                offsetCenter: [0, '-65%'],
                itemStyle: {
                  color: 'white'
                }
              },
              progress: {
                show: true,
                width: 20
              },
              // pointer: {
              //   show: false
              // },
              axisLine: {
                lineStyle: {
                  width: 20,
                  color: [
                    [1, '#18B2FC'],
                  ],
                  normal: { //颜色渐变
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [{
                          offset: 0,
                          color: '#5865F4'
                        },
                        {
                          offset: 0.5,
                          color: '#526AF5'
                        },
                        {
                          offset: 1,
                          color: '#18B2FC'
                        }
                      ]
                    )
                  }
                }
              },
              axisTick: {
                distance: -65,
                splitNumber: 5,
                lineStyle: {
                  width: 2,
                  color: '#0EB8FF',
                }
              },
              splitLine: {
                distance: -65,
                length: 14,
                lineStyle: {
                  width: 3,
                  color: '#0EB8FF'
                }
              },
              // 文字
              axisLabel: {
                distance: 30,
                color: '#0EB8FF',
                fontSize: 12,
                // precision:0
              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                width: '60%',
                lineHeight: 49,
                borderRadius: 8,
                offsetCenter: [0, '-5%'],
                fontSize: 49,
                fontWeight: 'bolder',
                formatter: '{value}%', // 格式化
                color: 'white'
              },
              data: [{
                // value: this.orderInfo.SPEED_RATE // 中间文字
                value: this.orderInfo.COMPLETE_QTY / this.orderInfo.QTY * 100
              }]
            },
            // 外线
            // {
            //   type: 'gauge',
            //   center: ['50%', '60%'],
            //   startAngle: 200,
            //   endAngle: -20,
            //   min: 0,
            //   max: 100,
            //   itemStyle: {
            //     normal: { //颜色渐变
            //       color: new echarts.graphic.LinearGradient(
            //         0, 0, 0, 1,
            //         [{
            //             offset: 0,
            //             color: '#5865F4'
            //           },
            //           {
            //             offset: 0.5,
            //             color: '#526AF5'
            //           },
            //           {
            //             offset: 1,
            //             color: '#18B2FC'
            //           }
            //         ]
            //       )
            //     }
            //   },
            //   progress: {
            //     show: true,
            //     width: 20 // 进度
            //   },
            //   pointer: {
            //     show: false
            //   },
            //   axisLine: {
            //     show: false
            //   },
            //   axisTick: {
            //     show: false
            //   },
            //   splitLine: {
            //     show: false
            //   },
            //   axisLabel: {
            //     show: false
            //   },
            //   detail: {
            //     show: false
            //   },
            //   data: [{
            //     value: 20
            //   }]
            // }
          ]
        };
        // 使用刚指定的配置项和数据显示图表
        // myChart.setOption(option);
        self.myChart.setOption(option);
        window.addEventListener("resize", function () {
          self.myChart.resize();
        });

        // 当窗口或者大小发生改变时执行resize，重新绘制图表
        // window.onresize = myChart.resize;
      }
    }
  }

</script>

<style lang="scss">
  .ProductionSchedule {
    .test_box {
      width: 100%;

      height: 300px;
    }

    .el-item {
      margin-left: 50px;
    }
  }

</style>
